<template>
  <div class="assess_record_part" ref="assess" v-loading="loading">
    <el-empty v-if="list.length==0" :image-size="150"  description="暂无数据" />
    <table width="100%" cellpadding="10px">
        <tr v-for="item in list" :key="item.id">
            <td><el-tag :type="judgeTag(assessStandard,item.quoteStandard)">{{ item.quoteStandardLabel }}</el-tag></td>
            <td><span class="title_part">评估员</span><span class="text_part">{{ item.assessorName }}</span></td>
            <td><span class="title_part">评估单位</span><span class="text_part">{{ item.assessmentUnitName }}</span></td>
            <td><span class="text_part">{{ item.assessmentTime }}</span></td>
            <td><span class="scord_part">{{ item.assessTotal }}</span><span class="text_part">分</span></td>
            <td><el-tag :type="judgeTag(accessLevel,item.nationalAssessmentResult)">{{ item.nationalAssessmentResultLabel }}</el-tag></td>
            <td><button @click="openDetail(item)">查看详情</button></td>
        </tr>
    </table>
    <div class="page_part">
        <AplidPaginate class="pageinate mt10" background v-bind="pageReac" small  @change="onPageChange" />
    </div>
    <!-- 能力评估详情弹窗 -->
    <AplidDialog width="65%" v-model="dialogShow" title="能力评估-详情">
        <DetailPage :model="detailData" v-bind="detailConfig"></DetailPage>
    </AplidDialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted} from 'vue'
import apiMod from '@/apiMod/index'
import AplidPaginate from '@/components/AplidCrud/src/AplidPaginate'
import AplidDialog from '@/components/AplidDialog/index.vue'
import { detailConfig } from '@/views/datacenter/business/elderlyAssessment/config'
import DetailPage from '@/views/aplid/DetailPage/index.vue'
let pageReac = ref({
	current: 1,
	size: 5,
	total: 0,
})
let assess = ref()
let loading = ref(false)
let props = defineProps({
    nowRowData:{
        type:Object,
        default:()=>({})
    }
})
let dialogShow = ref(false)
let list = ref([])
const getInitData = () =>{
    let params = {
    idCard:props.nowRowData.idCard,
    isWithAuth: 0,
    pageParaPO: pageReac.value
    }
    apiMod.dpElderlyAssessment_page(params).then(res=>{
        if(res.code==0){
            pageReac.value.total = res.data.total
            list.value = res.data.records
            loading.value = false
        }else{
            loading.value = false
        }
    })
}
let  assessStandard = ref()
let accessLevel= ref()
// 获取字典
const getDictData = ()=>{
    loading.value = true
    apiMod.getDictItemList(['ACCESS_LEVEL_COUNTRY','ASSESS_STANDARD']).then(res=>{
        if(res.code==0){
            assessStandard.value = res.data['ASSESS_STANDARD']
            accessLevel.value = res.data['ACCESS_LEVEL_COUNTRY']
            getInitData()
        }
    })
}
// 打开详情
let detailData = ref()
const openDetail = (item) =>{
    dialogShow.value = true
    detailData.value = item
} 
// 判断状态
const judgeTag = (data,value) =>{
    if(data&&(value||value==0)){
        value = String(value)
        let obj =  data.find(el=>{
           return value = String(el.value)
        })
        if(obj){
            return obj.remarks
        }
    }
}
getDictData()
const onPageChange = (data) => {
	pageReac.value = data
	getInitData()
}
</script>
<style scoped lang="scss">
.assess_record_part{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .page_part{
        align-self: flex-end;
    }
}
.scord_part{
    font-weight: 400;
font-size: 32px;
text-align: right;
color: #1c1c28;
margin-right: 5px;
}
.tag_part{
    width: 60px;
height: 29px;
line-height: 29px;
text-align: center;
background: #4787f0;
font-weight: 400;
font-size: 16px;

color: #fff;
border-radius: 3px;
}
td{
    // width: 15%;
}
button{
    width: 88px;
    height: 25px;
    border-radius: 4px;
    background: #0052d91a;
    border: 1px solid #0052d9;
    font-weight: 400;
    font-size: 16px;
    text-align: left;
    color: #0052d9;
    text-align: center;
    line-height: 25px;
    cursor: pointer;
}
.text_part{
    font-weight: 400;
    font-size: 16px;
    text-align: left;
    color: #000000e6;
}
.title_part{
    font-weight: 400;
    font-size: 16px;
    text-align: left;
    color:#A0A0A0;

}
</style>